<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">新增提现分单条件</template>
    <el-form :model="form" ref="conditionsSetForm" :rules="conditionsSetRule" :label-width="formLabelWidth">
      <el-form-item label="名称" prop="conditionName">
        <el-col :span="6">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'conditionsSetForm'})" type="input" v-model="form.conditionName"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="出款类型">
        <el-radio-group v-model="form.withdrawType" size="medium">
          <el-radio :label="2" value="2">三方手动出款</el-radio>
          <el-radio :label="0" value="0">人工出款</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="金额区间设置" prop="minAmount">
        <el-col :span="6">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'conditionsSetForm'})" v-model.number="form.minAmount" type="number" placeholder="请输入">
            <template slot="append">元</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="" prop="maxAmount">
        <el-col :span="6">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'conditionsSetForm'})" v-model.number="form.maxAmount" type="number" placeholder="请输入">
            <template slot="append">元</template>
          </el-input>
        </el-col>
      </el-form-item>
      <p class="tips">注1：设置的区间中，金额可等于区间下限，不可等于区间上限</p>
      <p class="tips">注2：相同的层级“三方手动出款”和“人工出款”的金额区间不可金额重叠</p>
      <el-form-item label="层级设置：" prop="levelId">
        <el-select
          :collapse-tags="true"
          v-model="form.levelId" width="100%" multiple placeholder="请选择层级">
          <el-option label="代理"
                     :key="-1"
                     :value="-1">
          </el-option>
          <el-option
            v-for="item in tableData"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-col :span="12">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'conditionsSetForm'})" type="textarea" v-model="form.remark"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'conditionsSetForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form} from '@/build'
  import {withdrawConditionSave} from '@/services/api/withdraw';
  import {getUserLevelList} from "@/services/api/userLevel";
  export default {
    name: "auto-withdraw-dialog",
    mixins: [form],
    props: ['value'],
    data() {
      return {
        formLabelWidth: '150px',
        form: {
          conditionName: undefined,
          withdrawType: 2,
          minAmount: 0,
          maxAmount: 0,
          levelId: [],
          remark:''
        },
        tableData:[],
        conditionsSetRule: {
          conditionName: [
            {required: true, message: '名称不能为空', trigger: 'blur'},
          ],
          minAmount: [
            {required: true, message: '最小金额不能为空', trigger: 'blur'},
          ],
          maxAmount: [
            {required: true, message: '最大金额不能为空', trigger: 'blur'},
          ],
          levelId: [
            {required: true, message: '请选择层级设置', trigger: 'blur'},
          ],
          remark: [
            {required: true, message: '备注不能为空', trigger: 'blur'},
          ]
        },
      }
    },
    mounted() {
      this.bindGet(getUserLevelList, 'tableData', {
        format:(data)=>{
          let arr = []
          data.forEach((v,k)=>{
            arr.push({
              title:v.name,
              value:v.levelId,
            })
          })
          return arr
        }
      });
      this.bindSave(withdrawConditionSave, 'saveForm', 'form', {
        beforeSend:(data)=>{
          const {conditionName,withdrawType,minAmount,maxAmount,levelId,remark} = data
          return {
            conditionName,
            withdrawType,
            minAmount,
            maxAmount,
            levelId:levelId.join(','),
            remark
          }
        },
        afterSuccess: () => {
          this.cancel()
          this.$parent.doGet({action: 'getGrid'})
        }
      });
      this.getAll();
    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },
    },

  }
</script>

<style lang="scss" scoped>
  .tips{
    color: #888888;
  }
</style>
